<template>
	<view>
		<view class="detail">
			<text class="title">{{essay.title}}</text>
			<text class="author">{{essay.author}}</text>
			<text class="content">{{essay.content}}</text>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" />
	</view>

</template>

<script>
	const audio = uni.createInnerAudioContext();
	export default {
		components: {},
		data() {
			return {
				read: {},
				id: '',
				essay: {},
				playLists: {},
				playListDetail: {},
				index: 0,
				state: 0,
				/*  */
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#aaa',
					iconColor: '#fff',
					icon: 'headphones'
				},
				play: {
					iconPath: '/static/pause.png',
					selectedIconPath: '/static/pause.png',
					text: '播放',
					active: false
				},
				pause: {
					iconPath: '/static/play.png',
					selectedIconPath: '/static/play.png',
					text: '暂停',
					active: false
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/previous.png',
						selectedIconPath: '/static/previous.png',
						text: '上一首',
						active: false
					},
					{
						iconPath: '/static/pause.png',
						selectedIconPath: '/static/pause.png',
						text: '播放',
						active: false
					},
					{
						iconPath: '/static/next.png',
						selectedIconPath: '/static/next.png',
						text: '下一首',
						active: false
					}
				]
			}
		},
		onLoad: function(option) {
			this.id = option.id;
			console.log(this.id);
		},
		onShow() {
			console.log(this.id);
			this.queryId(this.id);
			this.getPlayList();
			this.getPlayListAll(2520739691);
			this.FindState();
		},
		methods: {
			IsRead() {
				var that = this;
				setTimeout(function() {
					that.AlterState();
					console.log(123)
				}, 20000)
			},
			queryId(id) {
				console.log(id);
				uni.request({
					url: 'http://127.0.0.1:800/mhs/essay/queryId?id=' + id, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.essay = res.data.data;
						console.log(this.essay);
					}
				});
			},

			FindState() {
				uni.request({
					url: 'http://127.0.0.1:800/mhs/read/FindState?id=' + this.id, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.read = res.data.data;
						console.log(this.read);
						if (this.read == null) {
							this.IncreaseRead()
						} else {
							this.IsRead();
						}
					}
				});
			},

			AlterState() {
				console.log(this.id)
				uni.request({
					url: 'http://127.0.0.1:800/mhs/read/AlterState?state=1' + "&id=" + this.id, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.state = res.data.data;
						console.log(this.state);
					}
				});
			},
			IncreaseRead() {
				uni.request({
					url: 'http://127.0.0.1:800/mhs/read/IncreaseRead?id=' + this.id + "&state=0", //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.state = res.data.data;
						console.log(this.state);
						console.log(456666)
					}
				});
			},
			// 获取推荐歌单
			getPlayList() {
				uni.request({
					url: 'http://127.0.0.1:3000/personalized', //仅为示例，并非真实接口地址。
					success: (res) => {
						this.playLists = res.data;
						console.log(this.playLists)
					}
				});
			},
			// 获取歌单所有歌曲
			getPlayListAll(pid) {
				uni.request({
					url: 'http://127.0.0.1:3000/playlist/track/all?id=' + pid, //仅为示例，并非真实接口地址。
					success: (res) => {
						this.playListDetail = res.data;
						console.log(this.playListDetail)
						console.log(this.playListDetail.songs.length);
						// this.songUrl="https://music.163.com/song/media/outer/url?id="+res.data.songs[0].id + ".mp3";					
					}
				});
			},
			playSong(url) {
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + url + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
				audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			pauseSong() {
				audio.pause();
			},
			backgroundSong() {
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			nextSong() {
				if (this.index < this.playListDetail.songs.length) {
					this.index = this.index + 1;
				} else {
					this.index = 0;
				}

				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			previousSong() {
				if (this.index > 0) {
					this.index -= 1;
				} else {
					this.index = 0;
				}
				this.songUrl = "https://music.163.com/song/media/outer/url?id=" + this.playListDetail.songs[this.index]
					.id + ".mp3";
				audio.autoplay = true;
				audio.src = this.songUrl;
				audio.play();
			},
			trigger(e) {
				console.log(e.item)
				if (e.item.text == "播放") {
					// this.content[1] = this.pause;
					this.backgroundSong();
					this.content[1].text = "暂停";
					this.content[1].iconPath = '/static/play.png';
					this.content[1].selectedIconPath = '/static/play.png';
					console.log(this.content[1])
					return
				}
				if (e.item.text == "暂停") {
					this.pauseSong();
					// this.content[1] = this.play;
					this.content[1].iconPath = '/static/pause.png';
					this.content[1].selectedIconPath = '/static/pause.png';
					this.content[1].text = "播放";
					return
				}

				if (e.item.text == "上一首") {
					this.previousSong();
				}
				if (e.item.text == "下一首") {
					this.nextSong();
				}
			},
		}
	}
</script>

<style>
	.detail {
		display: flex;
		flex-direction: column;
	}

	.title {
		text-align: center;
		font-weight: bold;
		font-size: 25px;
	}

	.author {
		text-align: center;
	}

	.content {
		font-size: 20px;
	}
</style>